<template>
  <div>
    <!-- 检索区域 -->
    <el-form ref="query" label-width="80px" :inline="true">
      <el-form-item label="权限名:">
        <el-input v-model="table.search.displayName" class="wid-250"></el-input>
      </el-form-item>
      <el-form-item label="权限类型:">
        <el-select v-model="table.search.permissionType">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in PermissionType" :key="item.id" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
      <el-button type="success" @click="openAddPermission">新增</el-button>
    </el-form>

    <!-- 列表数据 -->
    <DataTable ref="dataTable" @buttonEvent="buttonEvent" :columns="table.columns" :apiUrl="table.apiUrl" :search="table.search" :buttonGroup="table.buttonGroup" :width="500"></DataTable>

    <!-- 新增 -->
    <addPermissionComponent v-if="addPermissionVisible" :dialogVisible="addPermissionVisible" @closeAddPermission="closeAddPermission" @successAddPermission="handlerSearch"></addPermissionComponent>

    <!-- 编辑 -->
    <editPermissionComponent v-if="editPermissionVisible" :permissionModel="permissionModel" :editdialogVisible="editPermissionVisible" @closeEditPermission="closeEditPermission" @successEditPermission="handlerSearch"></editPermissionComponent>

  </div>
</template>

<script>
import DataTable from "@/components/DataTable.vue";
import addPermissionComponent from "../permission/add.vue";
import editPermissionComponent from "../permission/edit.vue";

export default {
  components: {
    DataTable,
    addPermissionComponent,
    editPermissionComponent
  },
  data() {
    return {
      table: {
        columns: [
          {
            title: "权限名称",
            key: "displayname"
          },
          {
            title: "权限值",
            key: "targetname"
          },
          {
            title: "描述",
            key: "description"
          },
          {
            title: "类型",
            key: "permissiontype",
            formatter: function(row, column) {
              if (row.permissiontype == 1) {
                return "菜单权限";
              } else {
                return "普通权限";
              }
            }
          },
          {
            title: "创建时间",
            key: "creationtime"
          }
        ],
        apiUrl: "/api/Permission/getList",
        search: {
          name: ""
        },
        buttonGroup: [
          {
            name: "编辑",
            type: "success",
            icon: "",
            incident: "openEditPermission"
          },
          {
            name: "删除",
            type: "danger",
            icon: "",
            incident: "handleDelete"
          }
        ]
      },
      PermissionType: [
        {
          value: 1,
          label: "菜单权限"
        },
        {
          value: 2,
          label: "普通权限"
        }
      ],
      addPermissionVisible: false,
      editPermissionVisible: false,
      menuPermissionVisible: false,
      normalPermissionVisible: false,
      permissionModel: {},
      permissionid: ""
    };
  },

  created() {},

  mounted() {},
  methods: {
    buttonEvent(incident, index, row) {
      this[incident](index, row);
    },

    //检索
    handlerSearch: function() {
      this.$refs.dataTable.initload();
    },

    //删除
    handleDelete(index, row) {
      this.$confirm(
        "此操作将永久删除权限 " + row.displayName + ", 是否继续?",
        "提示",
        {
          type: "warning"
        }
      ).then(() => {
        this.$api
          .post("/api/Permission/delete", { permissionId: row.id })
          .then(rsp => {
            if (rsp != false) {
              this.handlerSearch();
            }
          });
      });
    },

    openAddPermission: function() {
      this.addPermissionVisible = true;
    },

    closeAddPermission: function() {
      this.addPermissionVisible = false;
    },

    openEditPermission: function(index, row) {
      this.editPermissionVisible = true;
      this.permissionModel = row;
    },

    closeEditPermission: function() {
      this.editPermissionVisible = false;
    }
  }
};
</script>
